/**
 * Created by imac13 on 19/1/5.
 */
import React,{ Component } from 'react';
import { Card,Form, Icon, Input, Button,Checkbox,message} from 'antd';

class FormLogin extends Component {
    handleSubmit = ()=> {
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                message.success(`${userInfo.username} 恭喜你，您通过本次表单学习，密码是${userInfo.password}`)
            }
        })
    };
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div>
                <Card title="登录行内表单" className="card-wrapper">
                    <Form layout="inline">
                        <Form.Item>
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item>
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary">登录</Button>
                        </Form.Item>
                    </Form>
                </Card>
                <Card title="登录水平表单" className="card-wrapper">
                    <Form style={{width:300}}>
                        <Form.Item>
                            {
                                getFieldDecorator('username',{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required:true,
                                            message:'用户名不能为空'
                                        },
                                        {
                                            min:5,max:10,
                                            message:'长度必须在5~10之间'
                                        },
                                        {
                                            pattern:new RegExp('^\\w+$','g'),
                                            message:'用户名必须为字母或数字'
                                        }
                                    ]
                                })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password',{
                                    initialValue:'123456',
                                    rules:[]
                                })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('remeber',{
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(<Checkbox>记住密码</Checkbox>)
                            }
                            <a style={{float:'right'}} href="">忘记密码</a>
                        </Form.Item>
                        <Form.Item>
                            <Button style={{width:'100%'}} type="primary" onClick={this.handleSubmit}>登录</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        )
    }
}

export default Form.create()(FormLogin);